<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>让坦克开起来</title>
		<style type="text/css">
			input {
				font-size: 26px;
				margin-top: 20px;
			}

			body {
				background-image: url(img/grassland.png);
			}

			#mytank {
				position: absolute;
				left: 10px;
				top: 100px
			}
		</style>
	</head>
	<body>
		<img id="mytank" src="img/right.png" >
<!-- 219970107 胡毅 -->
		<script>
			// 获取图片
			var Oimg = document.querySelector('img')
			// 获取图片的属性
			var style = getComputedStyle(Oimg)
			// 记录图片的初始位置
			var L = parseInt(style.left)
			var T = parseInt(style.top)
			//禁用右键 
			window.document.oncontextmenu = function() {
				return false;//219970107 胡毅
			}
			// 绑定键盘按下事件
			window.onkeydown = function(e) {
				console.log(e.key);    
				// 判断方向键
				switch (e.key) {
					// 按下上方向键
					case 'ArrowUp':
						// 改变图片的src地址，控制转向
						Oimg.src = 'img/up.png'
						// 目标位置 = 初始位置 - 每次移动距离（这里设为10px）
						T = T - 10
						// 改变图片的top距离，控制移动
						Oimg.style.top = T + 'px'
						break;
					case 'ArrowDown':
						Oimg.src = 'img/down.png'
						T = T + 10
						Oimg.style.top = T + 'px'
						break;
					case 'ArrowLeft':
						Oimg.src = 'img/left.png'
						L = L - 10
						Oimg.style.left = L + 'px'
						break;
					case 'ArrowRight':
						Oimg.src = 'img/right.png'
						L = L + 10
						Oimg.style.left = L + 'px'
						break;
				}
			}
		</script>
	</body>

</html>
